<template>
  <div class="picture-list">
    <!--图片列表-->
    <a-list item-layout="vertical" size="middle" :data-source="dataList" :loading="loading">
      <template #renderItem="{ item: file }">
        <a-list-item style="padding: 0" @click="">
          <a-row :wrap="false">
            <a-col flex="70px">
              <img
                :alt="file.name"
                :src="'/src/assets/' + (file.fileFormat ?? 'csv') + '_icon.svg'"
                style="width: 70px; object-fit: cover; margin-top: 10px"
                loading="lazy"
              />
            </a-col>
            <a-col flex="auto">
              <div style="margin-left: 10px">
                <div style="margin-bottom: 3px">
                  <a-space style="margin-bottom: 0px; margin-top: 10px">
                    <h2 >
                      <a :href="'/file/' + file.id">{{ file.name }}</a>
                    </h2>
                    <a-tag v-for="tag in file.tags" :key="tag">
                      {{ tag }}
                    </a-tag>
                  </a-space>
                </div>
                <div class="desc">
                  {{ file.introduction ?? '暂无介绍' }}
                </div>
                <a-row :wrap="false">
                  <a-col style="font-size: 18px" flex="auto">
                    <AimOutlined />
                    {{ file.category ?? '--' }}
                  </a-col>
                  <a-col style="font-size: 18px" flex="auto">
                    <InsertRowAboveOutlined />
                    {{ file.features ?? '--' }} Features
                  </a-col>
                  <a-col style="font-size: 18px" flex="auto">
                    <InsertRowLeftOutlined />
                    {{ file.instances ?? '--' }} Instances
                  </a-col>
                  <a-col style="font-size: 18px" flex="auto">
                    <BorderOutlined />
                    {{ formatSize(file.fileSize) }}
                  </a-col>
                </a-row>
              </div>
            </a-col>
            <a-col flex="150px"> </a-col>
          </a-row>

          <template #actions> </template>
          <!--          单张图片-->
          <a-list-item-meta>
            <template #description> </template>
            <template #title> </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import {
  InsertRowAboveOutlined,
  InsertRowLeftOutlined,
  BorderOutlined,
  AimOutlined,
} from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { ref } from 'vue'
import { deleteFileUsingPost } from '@/api/fileController.ts'
import { formatSize } from '../utils'

interface Props {
  dataList?: API.FileVO[]
  loading?: boolean
  showOp?: boolean
  onReload?: () => void
  canEdit?: boolean
  canDelete?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: false,
  showOp: false,
  canEdit: false,
  canDelete: false,
})

// 定义数据

const router = useRouter()

//跳转到图片详情页
const doClickFile = (file: API.FileVO) => {
  router.push({
    path: `/file/${file.id}`,
  })
}

// 删除数据
const doDelete = async (picture, e) => {
  // 阻止冒泡
  e.stopPropagation()
  const id = picture.id
  if (!id) {
    return
  }
  const res = await deleteFileUsingPost({ id })
  if (res.data.code === 0) {
    message.success('删除成功')
    props.onReload()?.()
  } else {
    message.error('删除失败')
  }
}


</script>

<style scoped>
:deep(.ant-card-meta-title) {
  text-align: center;
}
:deep(.ant-list-item-meta-title) {
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0;
}
.desc {
  font-size: 15px;
  margin-bottom: 3px;
  color: #aaa;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>
